<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在线下单</title>
    <link rel="shortcut icon" href="images/favicon.ico" />
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/response.css" rel="stylesheet">
    <link href="css/silde.css" rel="stylesheet">
    <link href="css/xiadan.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/layer/2.4/layer.js"></script>
    <style>


    </style>
</head>
<body>
<div class="header">
    <div class="width1003">
        <h1 class="logo"><a href="index.html"><img src="images/logo.png" width="202" height="74" /></a></h1>
        <div class="phones">
            <p>服务热线：<strong>4001001717</strong></p>
        </div><!--phones/-->
        <div class="clears"></div>
    </div><!--width1003/-->
</div><!--header/-->
<div class="nav-toggle">
    <div class="nav-open"><span class="glyphicon glyphicon-th-list"></span></div>
    <div class="nav-close"><span class="glyphicon glyphicon-remove"></span></div>
</div>
<div class="clearfix"></div>
<div class="nav">
    <ul class="width1003">
        <li><a href="index.html">首页</a></li>
        <li><a href="javascript:void(0)">寄件</a>
            <div class="chilNav">
                <a href="xiadan2.html">在线下单</a>
                <a href="">价格实时查询</a>
                <a href="search.html">快速收送查询</a>
            </div>
        </li>
        <li><a href="search.html">自助查询</a>
            <div class="chilNav">
                <a href="search.html">运单查询</a>
                <a href="service.html">网点查询</a>
                <a href="search3.html">货物追踪</a>
                <a href="search4.html">订单查询</a>
                <a href="search3.html">我的账单</a>
                <a href="search4.html">账号管理</a>

            </div>
        </li>
        <li><a href="product.html">产品与服务</a>
            <div class="chilNav">
                <a href="product.html">大件快递</a>
                <a href="product.html">小件快递</a>
                <a href="product.html">仓配一体化</a>
                <a href="product.html">增值服务</a>
                <a href="product.html">整车转运</a>
                <a href="product.html">仓储物流</a>
            </div>
        </li>
        <li><a href="join.html">帮助中心</a>
            <div class="chilNav">
                <a href="join.html">加盟指南</a>
                <a href="join.html">在线加盟</a>
                <a href="join.html">人才服务</a>
                <a href="job.html">人才招聘</a>
                <a href="job.html">在线招聘</a>
            </div>
        </li>
        <li><a href="news.html">新闻公告</a>
            <div class="chilNav">
                <a href="news.html">十七新闻</a>
                <a href="news.html">十七公告</a>
                <a href="news.html">行业动态</a>
                <a href="news.html">企业视频</a>
                <a href="news.html">企业微博</a>
            </div>
        </li>
        <div class="clears"></div>
    </ul>
</div><!--nav/-->

<!--我的快递-->
<div class="col_left">
    <h3 class="title1">我的快递</h3>
    <ul class="col_left_ul" >
        <li><a>网上下单</a></li>
        <li><a>我的订单</a></li>
        <li><a>我的理赔</a></li>
        <li><a>我的资料管理</a></li>
    </ul>
</div>

<div class="center_top">
    <img src="img/order_banner.jpg" id="img1"><br>
    <span> >>15秒即可完成注册，尽享更多优惠和便捷。立即<a class="zhudeng"><b>注册</b></a> | 已有账号？ 即可<a class="zhudeng"><b>登录</b></a></span>
</div>
<div class="news_title">
    <h4>
        网上下单
      <a id="history_btn" href="#" style="font-size:18px; margin-left: 400px;color: orangered;">历史下单</a>
      <a id="quick_order_btn" href="#" style="font-size: 18px;margin-left: 50px;color: orangered;">快速下单</a>
    </h4>
</div>
<div class="FaHuo_content">
    <div>发货人信息</div>
    <div class="fa_info">
        发货人信息:<input type="text" id="fname" name="fname">选择发货人信息<br>
        手机:<input type="text" id="ftel" name="ftel"><br>
        商品名称:<input type="text"  id="gname" name="gname"><br>

           发货地点:<input id="faddress" name="faddress" onkeyup="sou()" placeholder="请输入发件地址"><br>
        <div id="daceng" style="border:1px solid ;display:none"></div><br>

        商品重量:<span class="cart_td_6"><img src="images/taobao_minus.jpg" width="15" height="15" alt="minus" class="hand"/> <input id="num_3" name="weight" type="text"  value="0.1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></span>千克
        商品体积:<input type="text" id="size" name="size" >
        请选择快递类型:<select id="typeId" name="typeId">
        <option value="1">京东</option>
        <option value="2">顺风</option>
        <option value="3">申通</option>
        <option value="4">圆通</option>
        <option value="5">韵达</option>
        <option value="6">邮政</option>
    </select>

    </div>
</div>
<div class="ShouHuo_content">
    <div>收货人信息</div>
    <div class="fa_info">
        收货人姓名:<input type="text" id="cname" name="cname">&nbsp;选择收货人姓名<br>
        手机:<input type="text" id="phone1" name="phone1"><br>
        收件地点:<input type="text" id="address" name="address" onkeyup="sou2()" placeholder="请输入收件人所在地">
    </div>
    <div class="fa_info">
        <div id="daceng2" style="border:1px solid ;display:none"></div>
        <input type="button" value="计算两地距离" id="jisuan" height="20px"><span id="zhi"></span>

    </div>
</div>
<div class="ClassBtn">
    <div id="danjia">单价:<span class="cart_td_5">10</span>元<span class="cart_td_7"></span>
        商品总价：<label id="total" name="total" class="yellow"></label> 元<br />
    </div>
    <input type="button" id="quickBtn" value="立即下单" onclick="zhifu()">
    <input type="button" class="saveBtn" value="存为草稿">
</div>
<script>
    var xhr;

    function createXHR() {
        try {
            return new XMLHttpRequest();
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    //发件人地址

    function sou() {
        xhr = createXHR();
        var keyword = document.getElementById("faddress").value;
        if (keyword.trim().length > 0) {
            xhr.onreadystatechange = callback;
            xhr.open("POST", "/before/ChinaSouServlet", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("keyword=" + keyword);
        } else {
            var daceng = document.getElementById("daceng");
            daceng.style.display = "none";
        }
    }
    //收件人地址
    function sou2() {
        xhr = createXHR();
        var keyword = document.getElementById("address").value;
        if (keyword.trim().length > 0) {
            xhr.onreadystatechange = callback2;
            xhr.open("POST", "/before/ChinaSouServlet2", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("keyword=" + keyword);
        } else {
            var daceng = document.getElementById("daceng2");
            daceng.style.display = "none";
        }
    }

    function callback() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var daceng = document.getElementById("daceng");
            daceng.innerHTML = "";
            var str = xhr.responseText.split(",");
            var xiaoceng = "";

            if (str.length > 0) {
                for (var i = 0; i < str.length; i++) {
                    xiaoceng += "<div onmouseover='jingguo(this)' onmouseout='likai(this)' onclick='xuanzhong(this)'>";
                    xiaoceng += str[i];
                    xiaoceng += "</div>";
                }
                daceng.innerHTML = xiaoceng;
                document.getElementById("daceng").style.display = "block";
            } else {
                document.getElementById("daceng").style.display = "none";
            }
        }
    }

    function callback2() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var daceng = document.getElementById("daceng2");
            daceng.innerHTML = "";
            var str = xhr.responseText.split(",");
            var xiaoceng = "";

            if (str.length > 0) {
                for (var i = 0; i < str.length; i++) {
                    xiaoceng += "<div onmouseover='jingguo2(this)' onmouseout='likai2(this)' onclick='xuanzhong2(this)'>";
                    xiaoceng += str[i];
                    xiaoceng += "</div>";
                }
                daceng.innerHTML = xiaoceng;
                document.getElementById("daceng2").style.display = "block";
            } else {
                document.getElementById("daceng2").style.display = "none";
            }
        }
    }

    function jingguo(obj) {
        obj.style.backgroundColor = "lightblue";
        obj.style.cursor = "pointer";
    }

    function likai(obj) {
        obj.style.backgroundColor = "";
    }

    function xuanzhong(obj) {
        document.getElementById("faddress").value = obj.innerHTML;
        document.getElementById("daceng").style.display = "none";
    }

    function jingguo2(obj) {
        obj.style.backgroundColor = "lightblue";
        obj.style.cursor = "pointer";
    }

    function likai2(obj) {
        obj.style.backgroundColor = "";
    }

    function xuanzhong2(obj) {
        document.getElementById("address").value = obj.innerHTML;
        document.getElementById("daceng2").style.display = "none";
    }


     //计算两地距离
        $("#jisuan").click(function() {
            $.ajax({
                url:'/before/ChinaServlet',
                type:'POST',
                data:{txtSearch:$("#faddress").val(),txtSearch2:$("#address").val()},
                dataType:"json",
                success:function (data) {
                    $("#zhi").html(data.gongli);
                }
            })

        });



    //计算总价与小计
    function productCount(){
        var summer=0;
        var num=Math.round($(".cart_td_6").find("input").val());//商品数量
        var price=Math.round($("#zhi").text())*num;//商品小计
         // var price2=Math.round($("#zhi").text())+price;
        summer+=price;//总价

        $("#total").text(summer);

    }
    productCount();//页面加载完后运行

    //商品增加减少，flag为true时增加，flag为false时减少
    function changeNumber(dom,flag){
        var $input = $(dom).parent().find("input");
        var value = $input.val();
        if(flag){
            value++;
        }else{
            value--;
            if(value<=0){
                value=0.1;
               layer.msg("数量必须大于0");
            }
        }
        $input.val(value);
        productCount();
    };
    //点击增加
    $(".cart_td_6").find("img[alt='minus']").click(function(){changeNumber(this,false);});
    //点击减少
    $(".cart_td_6").find("img[alt='add']").click(function(){changeNumber(this,true);});

    $(function () {
        $("#quickBtn").click(function () {
            var fnames=$("#fname").val();
            if(fnames==""){
               layer.msg("信息不可为空");
                window.location.href="../before/xiadan2.html";
            }

            $.ajax({
                url:'/before/AddOrderServlet',
                type:'POST',
                data:{
                    //发货人
                    fname:$("#fname").val(),
                    ftel:$("#ftel").val(),
                    gname:$("#gname").val(),
                    faddress:$("#faddress").val(),
                    cname:$("#cname").val(),
                    phone1:$("#phone1").val(),
                    address:$("#address").val(),
                    weight:$("#num_3").val(),
                    size:$("#size").val(),
                    typeId:$("#typeId").val(),
                    typeName:$("#typeId").find("option:selected").text(),
                    total:$("#total").text()
                },
                dataType:'',
                success:function (data) {

                    if (data=="true"){
                        layer.msg("下单成功！");
                        location.href = "../before/aliplay.html";
                    } else{
                       layer.msg("下单失败！");
                    }
                }

            })
        });

        $(".saveBtn").click(function () {
            layer.msg("已存为草稿");
        });









    })
</script>



</body>
</html>